<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        .button{
            width: 50px;
            height: 50px;
        }
        .mydiv{
            margin-top: 300px;
            margin-left: 500px;
        }
        #text{
            width: 230px;
            height: 40px;
        }
    </style>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        function calcu(){

            $.ajax({
                type : "get",
                url : "/calculator/soval",
                data:{
                    "str":document.getElementById("text").value
                },
                success:function(ret){

                    document.getElementById("text").value = ret;
                }
            });
        }
        window.onload = function()
        {
           document.getElementById("zkh").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "(";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "(";
            }
            
           }
           document.getElementById("ykh").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = ")";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + ")";
            }
           }
           document.getElementById("ql").onclick = function(){
            document.getElementById("text").value = "";
           }
           document.getElementById("7").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "7";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "7";
            }
           }
           document.getElementById("8").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "8";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "8";
            }
           }
           document.getElementById("9").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "9";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "9";
            }
           }
           document.getElementById("*").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "*";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "*";
            }
           }
           /* document.getElementById("4").onclick = function(){
            document.getElementById("text").value = "（";
           } */
           document.getElementById("4").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "4";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "4";
            }
           }
           document.getElementById("5").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "5";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "5";
            }
           }
           document.getElementById("6").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "6";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "6";
            }
           }
           document.getElementById("/").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "/";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "/";
            }
           }
           document.getElementById("1").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "1";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "1";
            }
           }
           document.getElementById("2").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "2";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "2";
            }
           }
           document.getElementById("3").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "3";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "3";
            }
           }
           document.getElementById("+").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "+";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "+";
            }
           }
           document.getElementById("=").onclick = function(){
            /* if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "=";
            }
            else
            {
                var text = document.getElementById("text").value;
                /* document.getElementById("text").value = text + "="; */
                /* document.write(text1);
            } */ 
            
            calcu();
           }
           document.getElementById("0").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "0";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "0";
            }
           }
           document.getElementById(".").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = ".";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + ".";
            }
           }
           document.getElementById("-").onclick = function(){
            if(document.getElementById("text").value=="")
            {
                document.getElementById("text").value = "-";
            }
            else
            {
                var text = document.getElementById("text").value;
                document.getElementById("text").value = text + "-";
            }
           }
        }
    </script>
    <div class="mydiv">
        <input type="text" id="text"><br>
        <button class="button" id="zkh">（</button>
        <button class="button" id="ykh">）</button>
        <button class="button" id="ql">C</button><br>
        <button class="button" id="7">7</button>
        <button class="button" id="8">8</button>
        <button class="button" id="9">9</button>
        <button class="button" id="*">*</button><br>
        <button class="button" id="4">4</button>
        <button class="button" id="5">5</button>
        <button class="button" id="6">6</button>
        <button class="button" id="/">/</button><br>
        <button class="button" id="1">1</button>
        <button class="button" id="2">2</button>
        <button class="button" id="3">3</button>
        <button class="button" id="+">+</button><br>
        <button class="button" id="=">=</button>
        <button class="button" id="0">0</button>
        <button class="button" id=".">.</button>
        <button class="button" id="-">-</button>
        
    </div>
</body>
</html>